<template>
	<div class="accountingformealscontainer" v-if="student" >
		<el-dialog	
			  class="accountingformealsDialog"
			  :visible.sync="param.isshow"
			  :close-on-click-modal="param.modalclose"
			  :modal="false"
			  element-loading-background="rgba(0, 0, 0, 0.1)"
			  custom-class="accountingformeals"			  
			  >
			  <div class="title">{{mealsType==1?'购买餐费':'补交餐费'}}({{student.realName}})</div>
			  <div class="content-box">
			  	  <section>
			  	  		<div class="h-title">费用详情</div>
			  	  		<div class="mealfee-list">
			  	  			<div class="tablecss">
			              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
					      			<thead >
					      				<tr >
					      					<th>名称</th>
					      					<th>{{mealsType==1?'购买月份':'补交月份'}}</th>
					      					<th>单价(元/天)</th>
					      					<th>{{mealsType==1?'购买数量(天)':'补交数量(天)'}}</th>	
					      					<th>合计金额</th>
					      					<th v-if="mealsType==1">{{isLunchCharge?"符合增补数":"符合退餐数"}}</th>
					      					<th v-if="mealsType==1">{{isLunchCharge?"应补金额":"应退金额"}}</th>
					      					<th>{{mealsType==1?'应收金额':'应补交金额'}}</th>
					      				</tr>				      				
					      			</thead>
					      			<tbody v-if="mealsType==1">
					      				<tr v-for="(li,index233) in costlist" :key="index233">
					      					<td align="center">{{li.name}}</td>
					      					<td align="center" style="white-space: pre-line;">{{buyMonth}}</td>
					      					<td align="center">￥{{li.salesPrice}}</td>
					      					<td align="center">
												{{li.quantity}}
											</td>	
					      					<td align="center">￥{{li.totalmoney}}</td>
					      					<td align="center">
					      						{{Math.abs(li.refundDays)}}<br />
					      						<a v-if="li.refundDays!=0" href="javascript:void(0);" @click="ViewAttendance(li)">用餐记录</a>
					      					</td>
					      					<td align="center">￥{{Math.abs(li.balancemoney)}}</td>
					      					<td align="center">￥{{li.amountReceivable}}</td>
					      				</tr>	      				
					      			</tbody>
									<tbody v-else>
					      				<tr v-for="(li,index233) in dinnerShowList" :key="index233">
					      					<td align="center">{{li.name}}</td>
					      					<td align="center" style="white-space: pre-line;">{{li.month}}</td>
					      					<td align="center">￥{{li.salesPrice}}</td>
					      					<td align="center">
												{{li.quantity}}<br />
					      						<a v-if="li.quantity!=0" href="javascript:void(0);" @click="ViewAttendance(li)">用餐记录</a>
											</td>	
					      					<td align="center">￥{{li.totalmoney}}</td>
					      					<td align="center">￥{{li.amountReceivable}}</td>
					      				</tr>	      				
					      			</tbody>
				      		    </table>
					      	</div>
			  	  		</div>
			  	        <div class="total_box">
			  	        	<div class="actully_pay">
			  	        		<span>实际支付：</span>
			  	        		<span>￥{{param.payactutal}}</span>
			  	        	
			  	        	</div>
			  	        	
			  	        </div>
			  	  </section>
			  	  <section>
			  	  		
			  	  		<div class="pay-method-box">
			  	  			<table style="width: 100%;" cellpadding="0" cellspacing="0">
			  	  				<tr>
			  	  					<td colspan="2"><span style="font-weight: bold;">支付方式</span></td>			  	  					
			  	  				</tr>
			  	  				<tr>
			  	  					<td colspan="2">
										<el-radio-group v-model="param.radio">
											<el-radio v-for="item in pay_mode" :key="item.value" :label="item.value">
												<span style="font-size:0.16rem;">{{item.name}}</span>
											</el-radio>
										</el-radio-group>
			  	  					</td>		  	  					
			  	  				</tr>
			  	  				<tr>
			  	  					<td colspan="2"><span style="font-weight: bold;">关联业务</span></td>			  	  					
			  	  				</tr>
			  	  				<tr>
			  	  					<td style="width:1rem;text-align: right;padding-right: 0.1rem;"><span :necessary="!param.orderChecked">收据单号</span></td>
			  	  					<td>
			  	  						<el-input v-model="param.orderNo" ref="orderNo" style="width:2rem;" placeholder="请输入收据"
										 :disabled="param.orderChecked"></el-input>
			  	  						&nbsp;
			  	  						<el-checkbox v-model="param.orderChecked"><span style="font-size:0.16rem;">无收据</span></el-checkbox>
			  	  					</td>
			  	  				</tr>
			  	  				<tr>
			  	  					<td style="width:1rem;text-align: right;padding-right: 0.1rem;">备注</td>
			  	  					<td>
			  	  						<el-input v-model="param.remark" style="width:2rem;" placeholder="请输入备注"></el-input>
			  	  					</td>
			  	  				</tr>
			  	  			</table>
			  	  		</div>
			  	  </section>
			  </div>
			  <div class="footer">
				<div class="btnCancel" @click="btnCancel">上一步</div>
				<div style="width:0.1rem;"></div>
				<div class="btnOk" @click="btnOk" :style="disablePay?'cursor: not-allowed;':''">
					<span v-if="param.radio=='1'||param.radio=='2'||param.radio=='5'">确定支付</span>
					<span v-else>去支付</span>
				</div>
		      </div>
		</el-dialog>			
		
		<!--扫码支付-->
		<buymealfeepay v-show="buymealfeepayVisible" ref="buymealfeepay" @suceess="updateProcessCenterMoneyList"></buymealfeepay>
		<!--学员考勤-->
		<attendance ref="attendance"></attendance>
	</div>
	
	
</template>

<script>
	let vm;
	
	import buymealfeepay from "./buy_mealfee_pay"//扫码支付
	import attendance from "./attendance"; //学员考勤
	import fNumber from "@/js/utils/floatnumber.js"
	export default{
		components:{buymealfeepay,attendance},
		data(){
			return{
				/**1-午餐；2-晚餐 */
				mealsType:1,
				/**购买午餐时，符合退费天数是否为负数，负数则需要补交金额 */
				isLunchCharge:false,
				pay_mode:[],
				param:{
					isshow:false,
					modalclose:false,
					payactutal:0,//实际付的钱
					constpayactual:0,//应该收的前
					totalMoney:0,//总共收的钱	
					deductionMoney:0,//抵扣的钱
					radio:1,//付款方式
					orderNo:'',//订单号
					orderChecked:false,	//是否序号订单号				
					remark:'',//备注				
				},
				student:{},//学员信息	
				costlist:[],//购买课程信息
				dinnerShowList:[],//展示的餐费
				buymealfeepayVisible:false,
				disablePay:false,
			}
		},
		methods:{
			/**
			 * 初始化数据
			 */
			init(type,indata,student){
				this.mealsType=type;
				vm.student = student;
				vm.param.isshow = true;
				vm.isLunchCharge=false;
				vm.param.radio = 1;
				vm.param.orderNo = "";
				vm.param.orderChecked = false;
				vm.param.remark = "";
				vm.costlist = indata;	
				vm.disablePay=false;
				let curmonth = tool.DateToString(new Date(),"yyyy-MM-dd");
				let param = {studentId:vm.student.studentId,curDate:curmonth};
				if(type==1)
					//获取上个月剩余餐费金额
					api.getHistoryStudentMealsBalance(param).then(function(data){
						if(data.resultCode==2000){
							let days = data.info.refundDays||0;
							if(days<0)vm.isLunchCharge=true;
							let balance =data.info.totalBalance||0;
							vm.costlist[0].refundDays=days;
							vm.costlist[0].balancemoney=balance;
							vm.costlist[0].amountReceivable=fNumber.parseNumber(vm.costlist[0].totalmoney-balance);
							if(vm.costlist[0].amountReceivable<0){
								vm.costlist[0].amountReceivable=0;
								vm.disablePay=true;
								vm.$message({
									type:'warning',
									message:'剩余餐费过多，需再多买餐费！'
								});
							}
							vm.param.payactutal=vm.costlist[0].amountReceivable;

							vm.costlist[0].startTimeSettlement=data.info.startTimeSettlement;
							vm.costlist[0].endTimeSettlement=data.info.endTimeSettlement;
						}
						
					});
				else{
					vm.costlist[0].amountReceivable=vm.costlist[0].totalmoney;
					vm.param.payactutal=vm.costlist[0].amountReceivable;

					//晚餐
					vm.dinnerShowList=[];
					vm.costlist[0].dinnerList.forEach(row=>{
						let sm=row.time.split('-');
						let month=sm[0]+'-'+sm[1];
						vm.dinnerShowList.push({
							mealsId:vm.costlist[0].mealsId,
							name:vm.costlist[0].name,
							month:month,
							salesPrice:vm.costlist[0].salesPrice,
							quantity:row.mealsNum,
							totalmoney:row.payMoney,
							amountReceivable:row.payMoney
						});
					});
				}
				
			},
			/**
			 * 确定
			 */
			btnOk(){
				if(vm.disablePay)return;
				let orderNo = vm.$refs.orderNo;
				if(!vm.param.orderChecked){
					if(orderNo.value==""){
						vm.$message({
							message: "请输入收款单号",
							type: 'warning'
						});
						orderNo.focus();
						return;
					}
				}
				let mealslist;
				let bmoney = 0;
				if(this.mealsType==1){
					let monthNumber=vm.costlist[0].buyMonth.length;
					let totalBalanceMoney=vm.costlist[0].balancemoney;
					mealslist = vm.costlist[0].buyMonth.map(function(t){
						let row=vm.costlist[0];
						let str=t[0]+'-'+(t[1]<10?'0'+t[1]:t[1]);
						let totalMoney=fNumber.parseNumber(row.totalmoney/monthNumber);
						let realMoney=fNumber.parseNumber(row.amountReceivable/monthNumber);
						let balance22=0;
						if(totalBalanceMoney>0){
							realMoney=totalMoney-totalBalanceMoney;
							if(realMoney<=0){
								realMoney=0;
								balance22=totalMoney;
							}
							else{
								balance22=totalBalanceMoney;
							}
							
							totalBalanceMoney=totalBalanceMoney-totalMoney;
							if(totalBalanceMoney<0)totalBalanceMoney=0;
						}
						bmoney+=balance22;
						return{
							mealsId:row.mealsId,
							mealsName:row.name,
							mealsNum:fNumber.parseNumber(row.quantity/monthNumber),
							price:row.salesPrice,
							totalMoney:totalMoney,
							balanceMoney:balance22,
							realMoney:realMoney,
							leaveDays:row.refundDays,
							receivableMoney:fNumber.parseNumber(row.amountReceivable/monthNumber),
							modifyRealMoneyReason:'',
							useTime:str,
							type:vm.mealsType,
							startTimeSettlement:row.startTimeSettlement,
							endTimeSettlement:row.endTimeSettlement
						}
					});
					if(totalBalanceMoney<0){
						mealslist[0].balanceMoney=totalBalanceMoney;
						bmoney=totalBalanceMoney;
					}
				}
				else{
					bmoney=0;
					mealslist = vm.costlist[0].dinnerList.map(function(t){
						let row=vm.costlist[0];
						//起止时间
						let m=new Date(t.time.replace(/-/g,'/'));
						m.setMonth(m.getMonth() + 1, 0);
						let startTime = tool.DateToString(m, "yyyy-MM-01 00:00:00");
						let endTime = tool.DateToString(m, "yyyy-MM-dd 23:59:59");

						return{
							mealsId:row.mealsId,
							mealsName:row.name,
							mealsNum:t.mealsNum,
							price:row.salesPrice,
							totalMoney:t.payMoney,
							balanceMoney:0,
							realMoney:t.payMoney,
							leaveDays:0,
							receivableMoney:t.payMoney,
							modifyRealMoneyReason:'',
							useTime:t.time.split(' ')[0],
							type:vm.mealsType,
							startTimeSettlement:startTime,
							endTimeSettlement:endTime
						}
					});
				}
				
				let param ={
					studentId:vm.student.studentId,
					orderNo:orderNo.value,
					totalMoney:vm.costlist[0].totalmoney,
					receivableMoney:vm.costlist[0].amountReceivable,
					balanceMoney:bmoney,					
					realMoney:vm.param.payactutal,
					orderTime:tool.DateToString(new Date(),"yyyy-MM-dd HH:mm:ss"),
					remark:vm.param.remark,
					mealsData:mealslist,
					accountRecordData:[{payMode:vm.param.radio,receiptNo:vm.param.orderNo,remark:vm.param.remark}]
				}
				// debugger
				// return
				api.saveMeals(param).then(function(data){
				
					if(data.resultCode==2000){
						if(data.orderSignup.payMode!=3&&data.orderSignup.payMode!=4){//非在线支付
							vm.$message({
								message: '购买餐费成功',
								type: 'success'
							});
							vm.updateProcessCenterMoneyList();
						}else{
							let param = {
								payName:data.orderSignup.payMode==3?'wxpay':'alipay',
								realMoney:vm.param.payactutal,
								orderSigupId:data.orderSignup.orderSigupId,
								mealsData:data.orderSignup.mealsData
							}
							vm.buymealfeepayVisible=true;
							vm.$refs.buymealfeepay.init(param);
						}
						vm.param.isshow = false;
						
					}else{
						vm.$message({
							message: data.message,
							type: 'warning'
						});
					}
					
				})
			},
			/**
			 * 取消
			 */
			btnCancel(){
				vm.param.isshow = false;
				this.$emit('backselect');
			},			
			/**
			 * 价格变化
			 */
			changeprice(li){

				// if(li.relmoney>li.amountReceivable){
					
				// 	li.relmoney = li.amountReceivable;										
				// }
				let realMoney = 0;
				for(let i =0;i<vm.costlist.length;i++)						
					realMoney+= Number(vm.costlist[i].relmoney);
																
				vm.param.payactutal = parseFloat((realMoney).toFixed(2));
			},	
			/**
			 * 查看学员考勤
			 */
			ViewAttendance(li){
				//vm.parentData.show = false;
				// debugger
				let param={
					mealsType:vm.mealsType,
					mealsId:li.mealsId, 
					studentId:vm.student.studentId,
					studentName:vm.student.realName,
					startTime:li.startTimeSettlement,
					endTime:li.endTimeSettlement
				};
				if(this.mealsType==2){
					//起止时间
					let m=new Date(li.month.replace(/-/g,'/'));
					m.setMonth(m.getMonth() + 1, 0);
					let startTime = tool.DateToString(m, "yyyy-MM-01 00:00:00");
					let endTime = tool.DateToString(m, "yyyy-MM-dd 23:59:59");

					param.startTime=startTime;
					param.endTime=endTime;
					console.log(param)
				}
				vm.$refs.attendance.init(param);
			},
			/**刷新办理中心最新收退列表 */
			updateProcessCenterMoneyList(){
				vm.buymealfeepayVisible=false;
				this.$emit('suceess');
			}
	
		},
		computed:{
			buyMonth(){
				let result='';
				if(this.mealsType==1)
					vm.costlist[0].buyMonth.forEach(m=>{
						result+=m[0]+'-'+(m[1]<10?'0'+m[1]:m[1])+'\n'
					});
				else
					vm.costlist[0].dinnerList.forEach(m=>{
						let sm=m.time.split('-');
						result+=sm[0]+'-'+sm[1]+'\n'
					});

				return result;
			}

		},
		mounted(){
			vm = this;
			this.pay_mode=tool.getDictNameByValue(-100,'pay_mode');
		}
	}
</script>

<style lang="scss">
    .accountingformeals{
    	width:10rem !important;;
		border-radius: .1rem !important;;	
		margin-top:8vh !important;
    }

	.accountingformealsDialog{
		z-index: 30 !important;
        top: 0.81rem !important;
        left: 2.1rem !important;
        background-color:rgba(0,0,0,0.5) !important;
		.el-dialog__header{
			padding: 0px;
		}
		.el-dialog__body{
			padding: 0px !important;
		}	
		.el-dialog__footer{
			padding: .3rem;
			.footer-btn{
				width:100%;
				text-align: center;									
		   }
		}		
		.title{
			width:100%;
			height: 0.6rem;
			padding: 0.2rem 0.3rem;
			font-size: 0.2rem;
			font-weight: bold;				
		}	
		.content-box{
			width:100%;
			height: auto;
			padding: 0.2rem 0.3rem;
			section > .h-title{
				font-weight: bold;
				font-size: 0.16rem;
				height: 0.4rem;
				line-height: 0.4rem;
			}
			.mealfee-list{
				height: auto;
				width: 100%;
				border:1px solid #F0F0F0;
				border-radius: 0.08rem;
				table{
					border: none;
					
				}
			}
			.pay-method-box{
				height: auto;
				width: 100%;
				table tr{
					height: 0.4rem;
					font-size: 0.16rem;
					.el-input__inner{
						border-radius: 0.08rem;
				        font-size: 0.16rem;
				        color: #666666;
				        height: 0.36rem !important;
				        line-height: 0.36rem;
					}
				}
			}
			.total_box{
				width:100%;
				height: auto;
				font-size: 0.16rem;
				padding:0.3rem 0rem;
				.el-input__inner{
						border-radius: 0.08rem;				        
				        color: #666666;
				        height: 0.36rem !important;
				        line-height: 0.36rem;
				}
				.actully_pay{
					width:100%;
					height: 0.4rem;
					text-align: right;
					line-height:0.4rem;
					margin-bottom: 0.1rem;
					font-size: 0.2rem;
					
				    .el-icon-edit{
						cursor: pointer;
					}
				}
				.modify_reason{
					width:100%;
					height: 0.4rem;
					text-align: right;
					line-height:0.4rem;
				    .el-icon-edit{
						cursor: pointer;
					}
				}
			}
		}
		.footer{
			width:100%;
			height: auto;
			display: inline-flex;
			justify-content: center;
			padding:0.2rem 0.3rem;
			
			.btnOk{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #3885F8;
	            color: #FFFFFF;
	            border-radius: 0.1rem;
	            cursor: pointer;
        	}
	        .btnOk:hover{
	            background: rgba(56, 133, 248, 0.8);
	        }
	        .btnCancel{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #FFFFFF;
	            border-radius: 0.1rem;
	            color: #333333;        
	            border: 0.01rem solid #C0C4CC;
	            cursor: pointer;
	          
	        }
	        .btnCancel:hover{
	            background: rgba(56,133,248,0.1)
	        }
		}
		// 必须图标
		span[necessary="true"]::before {
			content: "*";
			color: #f56c6c;
			margin-right: 4px;
		}
	}
	
	
</style>